<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>超市账单管理系统</title>
		<link rel="stylesheet" href="css/public.css" />
		<link rel="stylesheet" href="css/style.css" />
		<!-- 生产环境版本，优化了尺寸和速度 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
	</head>
	<body>
		<div id="app">
			<!--头部-->
			<header class="publicHeader">
				<h1>超市账单管理系统</h1>

				<div class="publicHeaderR">
					<p><span>下午好！</span><span style="color: #fff21b"> {{loginUser.name}}</span> , 欢迎你！</p>
					<a href="javascript:void(0)" @click="logout()">退出</a>
				</div>
			</header>
			<!--时间-->
			<section class="publicTime">
				<span id="time">2015年1月1日 11:11 星期一</span>
				<a href="#">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
			</section>
			<!--主体内容-->
			<section class="publicMian">
				<div class="left">
					<h2 class="leftH2"><span class="span1"></span>功能列表 <span></span></h2>
					<nav>
						<ul class="list">
							<li><a href="billList.html">账单管理</a></li>
							<li><a href="providerList.html">供应商管理</a></li>
							<li><a href="userList.html">用户管理</a></li>
							<li><a href="password.html">密码修改</a></li>
							<li><a href="javascript:void(0)" @click="logout()">退出系统</a></li>
						</ul>
					</nav>
				</div>
				<div class="right">
					<div class="location">
						<strong>你现在所在的位置是:</strong>
						<span>用户管理页面 >> 用户修改页面</span>
					</div>
					<div class="providerAdd">

						<!--div的class 为error是验证错误，ok是验证成功-->
						<div>
							<label for="userName">用户名称：</label>
							<input type="text" v-model="updateUser.name" name="userName" id="userName" placeholder="韩露" />
							<span>*</span>
						</div>

						<div>
							<label>用户性别：</label>

							<select name="" v-model="updateUser.sex">
								<option value="0">男</option>
								<option value="1">女</option>
							</select>
						</div>
						<div>
							<label for="data">年龄：</label>
							<input type="text" v-model="updateUser.age" name="data" id="data" placeholder="" />
							<span>*</span>
						</div>
						<div>
							<label for="userphone">用户电话：</label>
							<input type="text" v-model="updateUser.phone" name="userphone" id="userphone" placeholder="13533667897" />
							<span>*</span>
						</div>

						<div>
							<label>用户类别：</label>
							<input type="radio" v-model="updateUser.type" value="0" name="userlei" />管理员
							<input type="radio" v-model="updateUser.type" value="1" name="userlei" checked />经理
							<input type="radio" v-model="updateUser.type" value="2" name="userlei" />普通用户

						</div>
						<div class="providerAddBtn">
							<!--<a href="#">保存</a>-->
							<!--<a href="userList.html">返回</a>-->
							<input type="button" value="保存" @click="update()" />
							<input type="button" value="返回" onclick="history.back(-1)" />
						</div>

					</div>

				</div>
			</section>
			<footer class="footer">
			</footer>
			<script src="js/time.js"></script>
		</div>
		<script>
			var vue = new Vue({
				el: "#app",
				data: {
					loginUser: {},
					//接受要修改的对象,进行回显!
					updateUser: {}
				},
				methods: {
					logout: function() {
						//1.提示确认框
						//2.确认 清空session中数据
						//3.跳转到登录页面
						if (confirm("确定要退出登录?")) {
							sessionStorage.clear();
							location.href = "login.html";
						}

					},
					update: function() {

						//修改
						var path = "http://localhost:8080/sms/user/update";

						this.$http.post(path, this.updateUser).
						then(function(data) {

							var r = data.body;

							if (r.code == 0) {
								alert(r.msg);
							} else {
								location.href = "userList.html";
							}

						});
					}
				},
				mounted: function() {
					//vue初始化完毕会主动触发
					var userStr = sessionStorage.getItem("user");
					var userObj = JSON.parse(userStr);

					this.loginUser = userObj;

					//接受要修改的回显user
					var updateStr = sessionStorage.getItem("update");
					var updateObj = JSON.parse(updateStr);

					this.updateUser = updateObj;
				}
			});
		</script>
	</body>
</html>
